<template>
  <div class="main_k">
    <div class="floating-particles" ref="particles"></div>
    <div class="register-container" v-show="isComponentMounted">
      <h2>注册</h2>
      <div class="form-group">
        <label for="registerUsername">用户名:</label>
        <input type="text" id="registerUsername" v-model="registerUsername" required ref="usernameInput"/>
      </div>
      <div class="form-group">
        <label for="registerPassword">密码:</label>
        <input type="password" id="registerPassword" v-model="registerPassword" required/>
      </div>
      <div class="button-group">
        <button class="register-btn" @click="handleRegister">注册</button>
        <button class="login-btn" @click="goLogin">返回登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import router from '@/router'
import {ElMessage} from 'element-plus';

// 配置axios默认URL
axios.defaults.baseURL = 'http://localhost:8082';

export default {
  name: 'Register',
  data() {
    return {
      registerUsername: '',
      registerPassword: '',
      isComponentMounted: false
    };
  },
  methods: {
    async handleRegister() {
      try {
        if (!this.registerUsername || !this.registerPassword) {
          ElMessage.error('用户名和密码不能为空');
          return;
        }

        console.log('准备发送注册请求...');
        const response = await axios({
          method: 'post',
          url: '/api/register',
          data: {
            username: this.registerUsername,
            password: this.registerPassword
          },
          headers: {
            'Content-Type': 'application/json'
          }
        });
        
        console.log('注册响应:', response);
        
        if (response.data.code === 200) {
          ElMessage.success('注册成功');
          router.push('/');
        } else {
          ElMessage.error(response.data.message || '注册失败');
        }
      } catch (error) {
        console.error('注册错误:', error);
        if (error.response) {
          console.log('错误响应:', error.response);
          ElMessage.error(error.response.data.message || '注册失败，请稍后重试');
        } else {
          ElMessage.error('网络请求失败，请检查网络连接');
        }
      }
    },
    goLogin() {
      router.push('/');
    },
    createParticles() {
      const particlesContainer = this.$refs.particles;
      if (!particlesContainer) return;
      
      for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        particle.style.animationDelay = `${Math.random() * 2}s`;
        particlesContainer.appendChild(particle);
      }
    },
    initializeComponent() {
      this.isComponentMounted = true;
      this.$nextTick(() => {
        if (this.$refs.usernameInput) {
          this.$refs.usernameInput.focus();
        }
        this.createParticles();
      });
    }
  },
  mounted() {
    this.initializeComponent();
  },
  activated() {
    this.initializeComponent();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.initializeComponent();
    });
  }
}
</script>

<style scoped>
.main_k {
  background-image: url('../assets/myhome.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(0, 217, 255, 0.5);
  border-radius: 50%;
  animation: float 3s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.main_k::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(12, 12, 50, 0.8) 0%, rgba(5, 5, 20, 0.95) 100%);
  top: 0;
  left: 0;
  z-index: 0;
}

.register-container {
  width: 350px;
  max-width: 95%;
  padding: 30px;
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: 10px;
  background: rgba(10, 20, 30, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.5s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h2 {
  color: rgb(253, 77, 77);
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  text-shadow: 0 0 10px rgba(253, 77, 77, 0.5);
}

.form-group {
  margin-bottom: 20px;
}

label {
  color: #0ff1de;
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(15, 241, 222, 0.5);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  background: rgba(10, 14, 23, 0.7);
  border: 1px solid rgba(0, 253, 255, 0.3);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-color: rgba(0, 253, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
  outline: none;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.register-btn,
.login-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.register-btn {
  background: linear-gradient(45deg, #0a84b3, #1ca2d3, #00d9ff);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3);
}

.login-btn {
  background-color: brown;
  color: chartreuse;
  box-shadow: 0 4px 15px rgba(165, 42, 42, 0.3);
}

.register-btn:hover,
.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 217, 255, 0.4);
}

.register-btn:active,
.login-btn:active {
  transform: translateY(1px);
}

.register-btn::after,
.login-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.register-btn:focus::after,
.login-btn:focus::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .register-container {
    width: 90%;
    padding: 20px;
  }
}
</style>